<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem>版本系统管理</BreadcrumbItem>
    </Breadcrumb>
    <Divider />

    <div>
      <Input
        search
        enter-button
        placeholder="Enter something..."
        class="ssm"
        @click="selectSubmit('formInline')" prop="name"
      />
    </div>
    <Table border :columns="columns7" :data="data6" class="table"></Table>

    <Page :total="pageTotal" 
    :current="pageNum" 
    :page-size="pageSize" 
    show-elevator 
    show-sizer 
    show-total 
    placement="top"  
    @on-change="handlePage" 
    @on-page-size-change='handlePageSize'
    class="fen">
    </Page>

    <!-- 修改密码弹窗 -->
    <Modal v-model="formTable.modal" title="用户修改" @on-cancel="modalCancel">
      <Form
        ref="formTable"
        label-position="right"
        :rules="formTableRules"
        :label-width="90"
        :model="formTable"
      >
        <Form-item label="版本名称" prop="versionName">
          <i-input v-model="formTable.versionName" placeholder="请输入版本名称"></i-input>
        </Form-item>
        <Form-item label="版本号" prop="versionCode">
          <i-input v-model="formTable.versionCode" placeholder="请输版本号"></i-input>
        </Form-item>
        <Form-item label="是否升级" prop="isUpdate">
          <i-input v-model="formTable.isUpdate" placeholder="是否升级"></i-input>
        </Form-item>
        <Form-item label="更新内容" prop="modifiedContent">
          <i-input v-model="formTable.modifiedContent" placeholder="请输入更新内容"></i-input>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button @click="modalCancel">取消</Button>
        <Button type="primary" icon="checkmark" :loading="formTable.loading" @click="editSubmit">修改</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    const validatePassCheck = (rule, value, callback) => {}
    return {
      pageTotal: 0, //数据总数
      pageNum: 1, //初始页
      pageSize: 10, //每页条数
      formInline: {
        versionName: ""
      },
      formTable: {
        modal: false,
        loading: false,
        versionName: "",
        versionCode: "",
        isUpdate: "",
        modifiedContent: ""
      },
      columns7: [
        {
          type: "selection",
          width: 80,
          align: "center"
        },
        {
          title: "编号",
          width: 80,
          key: "versionId",
          align: "center",
          // render: (h, params) => {
          //   return h('div', [
          //     h('Icon', {
          //       props: {
          //         type: 'id'
          //       }
          //     }),
          //     h('strong', params.row.versionId)
          //   ])
          // }
        },
        {
          title: "版本名称",
          width: 200,
          align: "center",
          key: "versionName",
        },
        {
          title: "版本号",
          key: "versionCode",
          width: 120,
          align: "center"
        },
        {
          title: "是否升级",
          key: "isUpdate",
          width: 100,
          align: "center"
        },
        {
          title: "更新内容",
          key: "modifiedContent",
          align: "center"
        },
        {
          title: "Action",
          key: "action",
          width: 160,
          align: "center",
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '10px'
                  },
                  on: {
                    click: () => {
                      this.sysEdit(params.row)
                    }
                  }
                },
                '修改'
              ),
            ])
          }
        }
      ],
      data6: [
        {
          versionId: "",
          versionName: "",
          versionCode: "",
          isUpdate: "",
          modifiedContent: ""
        },
      ]
    };
  },
  methods: {
    //分页
    handlePage(value) {
      console.log(value);
      this.pageNum = value;
      this.getVersion();
    },

    handlePageSize(value) {
      console.log(value);
      this.pageSize = value;
      this.getVersion();
    },
    getVersion(){
      this.$axios.get("apps",{
          params:{
            pageNum:this.pageNum,
            pageSize:this.pageSize
          }
        }).then(response =>{
          console.log(response.data);
          this.pageTotal=response.data.tatol
          this.data6 = response.data.data;
        })
        .catch();
    },
     //查询
    selectSubmit (versionName) {
      this.$refs[versionName].validate(valid => {})
    },
    // 修改
    editSubmit:function(data){
      this.formTable.loading = true
      this.$axios.put('app',{
        versionId:this.formTable.versionId,
        versionName:this.formTable.versionName,
        versionCode:this.formTable.versionCode,
        isUpdate:this.formTable.isUpdate,
        modifiedContent:this.formTable.modifiedContent
      })
      .then(response=>{
        console.log(response.data)
        
       this.formTable.loading = false
       
        if (response.data.code == 0) {
         this.$Notice.success({
            title: '信息修改成功'
          })
        } else {
          this.$Notice.error({
            title: '信息修改失败'
          })
        }
         this.modalCancel()
      }).catch(
        console.log(response.data)
      )
    },
    // 获取每一行值
    sysEdit (row) {
      console.log (row)
      this.formTable.modal = true
      this.formTable.versionId = row.versionId
      this.formTable.versionName = row.versionName
      this.formTable.versionCode = row.versionCode
      this.formTable.isUpdate = row.isUpdate
      this.formTable.modifiedContent = row.modifiedContent
    },
    // 取消修改
    modalCancel () {
      this.formTable.modal = false
      this.$refs['formTable'].resetFields()
    }
  },
  //查询所有
  created: function() {
    this.getVersion()
  //  this.$axios.get("apps")
  //     .then(response => {
  //       console.log(response.data);
  //       this.data6 = response.data.data;
  //     })
  //     .catch();
  }
}
</script>
<style>
.ssm {
  width: 260px;
}
.table {
  position: relative;
  margin-top: 20px;
}
 .fen {
  position: relative;
  margin-top: 30px;
  left: 32%;
}
</style>